<template>
  <div>
    <div class="menu">
      <el-menu :default-active="selected" mode="horizontal" :router="true">
        <el-menu-item v-for="m in menus" :index="m.route" :key="m.id">{{ m.text }}</el-menu-item>
      </el-menu>
      <div style="margin-right: 30px">
        <el-popconfirm title="退出登录吗？"
                       confirm-button-text='确定'
                       @confirm="logout"
                       cancel-button-text='不用了'
                       icon="el-icon-info"
                       icon-color="red">
          <el-button type="text" slot="reference">欢迎，{{ username }}
          </el-button>
        </el-popconfirm>
      </div>
    </div>
    <keep-alive include="recode query">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>

export default {
  name: "my_menu",
  data() {
    return {
      menus: [
        {id: '1', text: '今日记录', route: 'record'},
        {id: '2', text: '历史记录', route: 'query'},
        {id: '3', text: '数据统计', route: 'chart'},
        {id: '4', text: '课程管理', route: 'subject'},
        {id: '5', text: '日志管理', route: 'log'},
      ],
      selected: '',
      username: '',
    }
  },
  mounted() {
    this.username = localStorage.getItem('username')
    if (this.$options.name === this.$route.name) {
      this.selected = 'record'
    } else {
      this.selected = this.$route.name
    }
  },
  watch: {
    selected() {
      if (!localStorage.getItem('token')) {
        this.$router.push('/login')
      }
    }
  },
  methods: {
    logout() {
      this.$bus.$emit('logout')
    },
  }
}
</script>

<style scoped>
.menu {
  display: flex;
  justify-content: space-between;
}

.is-active {
  background-color: rgb(64, 157, 253) !important;
  color: white !important;
  border-radius: 5px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .3);
}

</style>
